![RemixでAWSサーバレス構成を手軽に作成できるGrunge Stackを試してみた](https://devio2023-media.developers.io/wp-content/uploads/2021/11/eycatch.png)
RemixでAWSサーバレス構成を手軽に作成できるGrunge Stackを試してみた
はじめに
こんにちは、CX事業本部MAD事業部の森茂です。
先日リリースされたRemix Stacks、Remixチームが公開しているAWSを利用したサーバレス構成のGrunge Stackテンプレートがどのような構成になっているのかを調べるために早速デプロイまでの流れを試してみました。
Grunge Stack
Grunge StackはAWSを利用したサーバレス構成のアプリケーションテンプレートです。サーバレスフレームワークとしてはArchitectを利用しています。データベースにはDynamoDBを利用し、アプリケーションはCloudFormationを利用してLambdaへデプロイされAPI Gatewayを介して公開されます。また開発用にローカル環境のサンドボックス環境も用意されているのでAWS環境へデプロイせずに動作を確認することが可能です。(サンドボックス環境のDynamoDBはインメモリーデータベースとなるのでデータが永続化されません。そのためサーバーの再起動ごとに新規データとなるので注意が必要です。)
なお、Grunge Stackを使ったアプリケーションの実際の運用時には、API Gatewayにカスタムドメインを割り当て独自ドメインで公開するような使い方が想定されます。
Grunge StackのAWS環境
付随して作成される細かなリソースは省略していますが大まかなリソースは以下のような形になります。
Grunge Stack に用意されている機能一覧(公式ドキュメントより抜粋)
- AWS deployment with Architect
- Production-ready DynamoDB Database
- GitHub Actions for deploy on merge to production and staging environments
- Email/Password Authentication with cookie-based sessions
- DynamoDB access via
arc.tables
- Styling with Tailwind
- End-to-end testing with Cypress
- Local third party request mocking with MSW
- Unit testing with Vitest and Testing Library
- Code formatting with Prettier
- Linting with ESLint
- Static Types with TypeScript
事前準備
Grunge Stackの利用にはAWS環境のデプロイにArchitectを利用するため、AWS CLI、また認証の設定などをあらかじめ完了しておく必要があります。(ArchitectではCloudFormationとパラメータストアを利用して環境を構築するため構築内容にあわせた権限が必要となります。)
今回は下記の形で認証情報が設定されていることを前提としています。
項目 | 設定 |
---|---|
リージョン | ap-northeast-1 |
プロファイル名 | default |
アクセス権限 | AdministratorAccess |
AWS CLIについての環境の参考情報
- AWS Command Line Interface とは? - AWS Command Line Interface
- “初心者だからこそ触りたい、AWS CLI ~ “躓きやすい”を無くしたい ~ #devio2020 “というタイトルで動画を投稿しました | DevelopersIO
Remix The Grunge Stackのインストール
RemixのCLIを利用してGrunge Stackをインストールします。
$ npx create-remix@latest
$ npx create-remix@latest Need to install the following packages: create-remix@latest Ok to proceed? (y) y npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject. ? Where would you like to create your app? /remix-grunge-stack ? What type of app do you want to create? A pre-configured stack ready for production ? Which Stack do you want? (Learn more about these stacks: https://remix.run/stacks) Blues Indie ❯ Grunge ? Do you want me to run `npm install`? Yes ...各種パッケージのインストール処理 ? Running remix.init script ? Do you want to run the build/tests/etc to verify things are setup properly? (y/N) ✅ Project is ready! Start development with "npm run dev" ? That's it! `cd` into "remix-grunge-stack" and check the README for development and deploy instructions!
インストール完了後、アプリケーションが起動するか確認しておきます。
$ npm run dev
Rebuilding... Done in 108ms. ? File created: app/styles/tailwind.css ⚠️ Test routes enabled. ? Rebuilding... ? Rebuilt in 194ms App ⌁ remix-grunge-stack-c9cc Region ⌁ us-west-2 Profile ⌁ default Version ⌁ Architect 10.1.0 cwd ⌁ /remix-grunge-stack ✓ Sandbox Found Architect project manifest: app.arc ✓ Sandbox Found testing environment variables: .env ✓ Sandbox Using testing live AWS infra: @tables ✓ Sandbox Started AWS service emulator ✓ Sandbox @tables created in local database ✓ Sandbox @http server started ✓ Sandbox Project files hydrated into functions ✓ Sandbox Available @http (HTTP API mode / Lambda proxy v2.0 format) routes any /\* ................................ server http://localhost:3000 ✓ Sandbox Started in 53ms ❤︎ Local environment ready! ✓ Sandbox Started file watcher
http://localhost:3000
をブラウザで開いてGrunge Stackのページが確認できました。
Architectの設定
Grunge Stackインストール時の初期設定時にはAWSの利用リージョンがus-west-2
となっているためap-northeast-1
を利用するように設定ファイルを変更します。ArchitectではAWSリソースの設定をapp.arc
ファイルに記載します。
Grunge Stackを利用するためのAWSリソースについてはすでに記載されているのでリージョン設定と利用プロファイル名(defaultの場合は記載がなくても問題ありません)のみ追記します。
その他設定できる項目については公式ドキュメントを参照ください。
# @awsとしてAWSリソースの設定を追記 @aws region ap-northeast-1 profile default @app # アプリケーションの名称(各リソースの名前空間として利用される、CLIインストール時に自動生成される) remix-grunge-stack-c9cc @http # API Gatewayの設定 /* method any src server @static # S3バケットの設定 @tables # DynamoDBの設定 user pk *String password pk *String # userId note pk *String # userId sk **String # noteId
GitHub リポジトリの用意
Grunge StackはデプロイにGitHub Actionsを利用するため新規リポジトリを用意しておきます。 GitHub Actionsの環境変数にAWSへアクセスするためのAWSのアクセスキー(アクセスキーIDとシークレットアクセスキー)を設定する必要があるため、AWSマネジメントコンソール等で用意します。
用意したリポジトリにAWS_ACCESS_KEY_ID
、AWS_SECRET_ACCESS_KEY
としてAWSのアクセスキーを登録します。
環境変数の設定
Grunge Stackアプリケーション内で利用している環境変数をLambda上で利用できるようにArchitectが用意している作法で環境変数を登録します。arc env
コマンドでAWSのパラメーターストアに変数を登録することでその値がアプリケーションのデプロイ時にLambda上の環境変数へ反映される仕組みになっています。
$ npx arc env --add --env staging ARC_APP_SECRET $(openssl rand -hex 32) $ npx arc env --add --env staging SESSION_SECRET $(openssl rand -hex 32) $ npx arc env --add --env production ARC_APP_SECRET $(openssl rand -hex 32) $ npx arc env --add --env production SESSION_SECRET $(openssl rand -hex 32)
アプリケーションで他の環境変数が必要になった場合には同じ方法で都度追加する必要があります。
デプロイ
Grunge StackのGitHub Actionsにはmain
ブランチにpushされた場合にはproduction
環境、dev
ブランチにpushされた場合にはstaging
環境としてデプロイされる仕組みがすでに用意されています。
準備が整ったところでmain
ブランチにpushしてみます。
各種CIに登録されているテストが走り、その後デプロイタスクが動き出すので完了を待ちます。
実際にアクセスするURLはAWSマネジメントコンソールからCloudFormationの出力タブで確認するか、GitHub Actionsのログから知ることができます。
CloudFormationで作成されるリソース
独自ドメインでの運用
API Gatewayにカスタムドメインを割り当てることで独自ドメインでの運用も可能です。 ドメインをAWSで運用しているか別で運用しているかでやり方が異なりますので詳しくは下記記事を参照ください。
- API Gateway でカスタムドメインを利用する(SSL 証明書のみ AWS 機能で用意するパターン) | DevelopersIO
- API Gateway をカスタムドメインで HTTPS 化する | DevelopersIO
Stackソースコード
ちょうど公式ドキュメントのチュートリアルがIndie Stackをベースとしたものに切り替わりました。Grunge StackとはDynamoDBへデータを保存する部分がPrismaを利用してPostgreSQLに保存という形にはなりますがその他のロジックは同じものとなっています。
RemixでのCRUD処理やFormの使い方が参照できるのでぜひこちらも試してみてください。
さいごに
Remix StacksのThe Grunge Stackを使ってAWS環境へアプリケーションをデプロイしてみました。Architect独自の設定はあるものの一度設定を用意すればGitHub Actionsを使って簡単にデプロイできるので運用はかなり楽になりそうです。ぜひRemix Grunge StackとAWSを使ってお手軽なサーバーレス環境を構築してみてはいかがでしょうか。